<template>
  <div class="cash1" style="margin-top: 70px;">
    <el-table :data="state.tableData" style="width: 100%; padding: 15px; padding-top: 0px" :header-cell-style="{
      backgroundColor: 'var(--tableheaderback)',
      color: 'var(--tableheadercolor)',
      border: '2px solid var(--tableborder)',
    }" :cell-style="{ border: '2px solid var(--tableborder)' }" 
    :row-class-name="rowStyle" stripe border>
    <el-table-column min-width="400px" v-for="(item, index) in state.oldList1" :label="item.label" :prop="state.columns[0].prop"  :key="`col_${index}`" align="center"></el-table-column>
      <el-table-column v-for="(item, index) in state.oldList" :key="`col_${index}`" :prop="state.columns[index+1].prop"
        :label="item.label" align="center"></el-table-column>
    </el-table>
  </div>

  <div class="remark">
    <div>{{ Remark }}</div>
    <div>{{ RM_Unqualified }}</div>
    <div>{{ RM_Qualified }}</div>
    <div>
      {{ RM_Adverse }}
    </div>
  </div>
  <div class="zhanwei" style="height: 50px; width: 100vw"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed, watch } from "vue";
import X2js from "x2js";
import { getCashFlow } from "@/api/axios/reqTest";
import Sortable from "sortablejs";
const RM_Adverse = ref('');
const RM_Qualified = ref('');
const RM_Unqualified = ref('');
const Remark = ref('');

const state = reactive({
  oldList: [
    {
      label: "",
      prop: "three",
    },
    {
      label: "",
      prop: "four",
    },
    {
      label: "",
      prop: "five",
    },
    {
      label: "",
      prop: "six",
    },
    {
      label: "",
      prop: "seven",
    },
  ],
  oldList1: [
        {
            label: '',
            prop: 'two',
        },
    ],
  columns: [
    {
      label: "",
      prop: "two",
    },
    {
      label: "",
      prop: "three",
    },
    {
      label: "",
      prop: "four",
    },
    {
      label: "",
      prop: "five",
    },
    {
      label: "",
      prop: "six",
    },
    {
      label: "",
      prop: "seven",
    },
  ],
  tableData: [
    {
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
    },
  ],
  tableConfig: {
    tableItems: [
      {
        label: "",
        prop: "two",
      },
      {
        label: "",
        prop: "three",
      },
      {
        label: "",
        prop: "four",
      },
      {
        label: "",
        prop: "five",
      },
      {
        label: "",
        prop: "six",
      },
      {
        label: "",
        prop: "seven",
      },
    ],
  },
});

onMounted(() => {
  test();
 // columnDrop3();
 // columnDrop4();
});

const test = async () => {
  const x2js = new X2js();
  const xml = await getCashFlow();
  const json = x2js.xml2js(xml as any);
  console.log(json)
  const result: any = json;
  const data = result.CashFlowStatement.GrpCashFlow.CashFlow;
  RM_Adverse.value = result.CashFlowStatement.GrpRemarks.Remarks.RM_Adverse;
  RM_Qualified.value = result.CashFlowStatement.GrpRemarks.Remarks.RM_Qualified;
  RM_Unqualified.value = result.CashFlowStatement.GrpRemarks.Remarks.RM_Unqualified;
  Remark.value = result.CashFlowStatement.GrpRemarks.Remarks.Remark;
  delete data[0]["_header"];


  
  const arr1: any = [];
  data.forEach((item: any, index: number) => {
    const entries: any = Object.entries(item);
    arr1.push({});
    const composedArr =data.length - 1 == index
         ? [entries[0][1], ...entries[1][1]]
         : [...entries[0][1]];
    composedArr.forEach((value: any, index2: number) => {
      const objKey = ["two", "three", "four", "five", "six", "seven"];
      // var regex = /\(/.test(value);
      // console.log('regex',regex)
      // let v = "";
      // if (regex && index2) {
      //   var re = /\([^\)]+\)/g;
      //   var encode = value.match(re)[0];
      //   v = encode.substring(1, encode.length - 1);
      //   console.log('regextrue',v);
        
      // } else {
      //   v = value;
      //   console.log('regexflase',v);
        
      // }
      arr1[index][objKey[index2]] = value;
    });
  });
  state.tableData = arr1.filter((item: any, index: number) => index);
  const label = ref();
  label.value = Object.values(arr1[0]).map((item: any) => {
    return item;
  });
  state.oldList1.forEach((item: any, index: number) => {
        item.label = label.value[0];
    });
  state.oldList.forEach((item: any, index: number) => {
    item.label = label.value[index+1];
  });
  // --------第二个表格-------------------------------------
  // const arr2: any = [];

  // delete tableData2[0]["_header"];
  // console.log("table", tableData2);
  // tableData2.forEach((item: any, index: number) => {
  //   const entries: any = Object.entries(item);
  //   arr2.push({});
  //   const composedArr =
  //     tableData2.length - 1 == index
  //       ? [entries[1][0], ...entries[1][1]]
  //       : [...entries[0][1]];

  //   composedArr.forEach((value: any, index2: number) => {
  //     const objKey = ["two", "three", "four", "five", "six", "seven"];
  //     var regex = /\(/.test(value);
  //     let v = "";
  //     if (regex && index2) {
  //       var re = /\([^\)]+\)/g;
  //       var encode = value.match(re)[0];
  //       v = encode.substring(1, encode.length - 1);
  //     } else {
  //       v = value;
  //     }
  //     arr2[index][objKey[index2]] = v;
  //   });
  // });
  // state.tableData2 = arr2.filter((item: any, index: number) => index);
  // console.log("arr2", arr2);
  // const label2 = ref();
  // label2.value = Object.values(arr2[0]).map((item: any) => {
  //   return item;
  // });
  // state.oldList2.forEach((item: any, index: number) => {
  //   item.label = label2.value[index];
  // });
  // console.log("label2", label2.value, state.oldList2);
};
const rowStyle = ({ row, rowIndex }: any) => {
    console.log(row, rowIndex);
    const regx = /(\d{2})\/(\d{4})/g.test(row.three);
    console.log(regx);
    if (regx) {
        return 'warning-row';
    } else {
        return 'success-row';
    }
};
const columnDrop3 = () => {
  const tHeader = document.querySelector(
    `.cash1 .el-table__header-wrapper tr`
  ) as HTMLElement;
  Sortable.create(tHeader, {
    animation: 180,
    /** 延迟 */
    // delay: 1,
    filter: ".disabled",
    onEnd: (evt: any) => {
      const oldItem = state.columns[evt.oldIndex];
      state.columns.splice(evt.oldIndex, 1);
      state.columns.splice(evt.newIndex, 0, oldItem);
    },
  });
};
// const columnDrop4 = () => {
//   const tHeader = document.querySelector(
//     `.cash2 .el-table__header-wrapper tr`
//   ) as HTMLElement;
//   Sortable.create(tHeader, {
//     animation: 180,
//     /** 延迟 */
//     // delay: 1,
//     filter: ".disabled",
//     onEnd: (evt: any) => {
//       const oldItem = state.columns[evt.oldIndex];
//       state.columns2.splice(evt.oldIndex, 1);
//       state.columns2.splice(evt.newIndex, 0, oldItem);
//     },
//   });
// };
// const rowchange = (row:any)=>{
// if(row.rowIndex == 4){
//     return 'success-row';
// }
// }
</script>

<style scoped>
.cash2 {
  margin-top: 10px;
}

.remark {
  padding: 15px;
  color: #9e9e9f;
}

/* :deep(.el-table .success-row) {
color: red !important;
} */
</style>
